<!-- 轮案组管理 -->
<template>
  <div class="lazgl">
    <!-- 左侧团队列表信息--start -->
    <div class="left-content" v-loading="loading">
      <el-input v-model="filterKey" placeholder="请输入关键字过滤" clearable />
      <el-tree
        ref="treeRef"
        default-expand-all
        highlight-current
        node-key="value"
        :data="treeData"
        :props="{
          label: 'label',
          children: 'children'
        }"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      ></el-tree>
      <div class="addjgy">
        <el-button type="text" @click="addjgy">
          <i class="el-icon-plus"></i>添加监管员/组</el-button
        >
      </div>
    </div>
    <!-- 左侧团队列表信息--end -->
    <!-- 右侧当前左侧选中数据--start -->
    <div class="right-content">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="item in tabList"
          :key="item.component"
          :label="item.label"
          :name="item.component"
        >
          <component
            v-if="item.component === activeName"
            :is="item.component"
            :tdbh="tdbh"
            @refresh="queryTdxx"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 右侧当前左侧选中数据--end -->
    <!-- 添加监管员弹窗 -->
    <addjgy ref="addjgyRef" @refresh="queryTdxx" />
  </div>
</template>

<script>
import tdxxService from '@/api/tdxx.js'
import { getTdxx } from './format-tdxx'

import addjgy from './dialogs/addjgy.vue'
import lazxx from './tabs/lazxx.vue'
import ywfw from './tabs/ywfw.vue'
export default {
  name: 'lazgl',
  components: {
    lazxx,
    ywfw,
    addjgy
  },
  data () {
    return {
      loading: false,
      // 左侧团队关键字过滤
      filterKey: '',
      // 左侧团队信息树数据
      treeData: [],
      // 选中的tab
      activeName: 'lazxx',
      // 右侧tabs
      tabList: [
        { label: '轮案组信息', component: 'lazxx' },
        { label: '业务范围', component: 'ywfw' }
      ],
      // 当前选择的团队
      tdbh: ''
    }
  },
  watch: {
    filterKey (val) {
      this.$refs.treeRef.filter(val)
    }
  },
  mounted () {
    this.queryTdxx()
  },
  methods: {
    /** 左侧树 */
    // 获取左侧树数据
    queryTdxx () {
      const params = {
        dwbm: this.$store.state.personInfo.dwbm
      }
      this.loading = true
      tdxxService
        .queryTdxx(params)
        .then(res => {
          this.treeData = getTdxx(res)
          this.$nextTick(() => {
            // 默认选中第一个
            this.tdbh = this.treeData[0]?.value
            this.$refs.treeRef.setCurrentKey(this.tdbh)
          })
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 点击左侧树
    handleNodeClick (data) {
      if (!data.children) return
      this.tdbh = data.value
    },
    // 过滤左侧树数据
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    /** 添加监管员 */
    addjgy () {
      this.$refs.addjgyRef.openDialog()
    }
  }
}
</script>

<style lang="scss" scoped>
.lazgl {
  display: flex;
  background-color: #fff;
  padding: 15px;
  border: 1px solid #b6cae4;
  > div {
    height: 100%;
  }
  .left-content {
    border: 1px solid #b6cae4;
    width: 310px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    .el-tree {
      flex: 1;
      height: 0;
      overflow: auto;
    }
    .addjgy {
      display: flex;
      justify-content: flex-end;
    }
  }
  .right-content {
    margin-left: 15px;
    flex: 1;
    width: 0;
    .el-tabs {
      height: 100%;
    }
  }
}
</style>
